<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <jsp:include page="/layout/_imports.jsp"></jsp:include>
</head>
<body>
<jsp:include page="/layout/_nav.jsp"></jsp:include>
<div class="container">
    <h2>权限管理</h2>
    <a href="/role/add" class="btn btn-primary">添加角色</a>
    <table class="table" style="text-align: center">
        <thead class="thead-dark">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">名称</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${roles}" var="r">
            <tr>
                <th scope="row">${r.id}</th>
                <td>${r.name}</td>
                <td>
                    <form action="/role/delete/${r.id}" method="post">
                        <a href="/role/edit/${r.id}" class="btn btn-primary">编辑</a>
                        <button type="submit" class="btn btn-danger"
                                onclick="return confirm('确认删除？')">删除
                        </button>
                    </form>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <c:if test="${not empty msg}">
        <div class="alert alert-danger">${msg}</div>
    </c:if>
    <div class="page_identifier">
        <c:if test="${page - 1 > 0}">
            <a class="page_previous page_item" href="/role/manage?page=${page - 1}&size=${size}">上一页</a>
        </c:if>
        <c:if test="${page - 5 > 0}">
            <a class="page_previous page_item" href="/role/manage?page=1&size=${size}">1</a>
            <a class="page_previous page_item" href="/role/manage?page=${page - 6}&size=${size}">...</a>
        </c:if>
        <c:forEach var="i"
                   begin="${(page - 5 < 0 ? 0 : page - 5) + 1}"
                   end="${(page + 5 > total ? total : page + 5)}">
            <a class="page_count_1 page_item ${page == i ? "btn btn-primary" : ""}"
               href="/role/manage?page=${i}&size=${size}">${i}</a>
        </c:forEach>
        <c:if test="${page + 5 < total}">
            <a class="page_previous page_item" href="/role/manage?page=${page + 6}&size=${size}">...</a>
            <a class="page_previous page_item" href="/role/manage?page=${total}&size=${size}">${total}</a>
        </c:if>
        <c:if test="${page + 1 <= total}">
            <a class="page_next page_item" href="/role/manage?page=${page + 1}&size=${size}">下一页</a>
        </c:if>
    </div>
    <div class="page_info">页面${page}/${total},共有${count}条数据</div>
    <div id="page_select">
        <form action="/role/manage" method="get" class="page_select">
            <select class="form-select" aria-label="Default select example" name="size">
                <option selected>选择每页显示的条数</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </form>
    </div>
    <style>
        .page_identifier {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .page_item {
            text-decoration: none;
            color: black;
            width: 50px;
            height: 50px;
            border: 1px solid grey;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
            padding: unset;
            border-radius: 5px;
            margin: 0 5px;

        }

        .page_item:hover {
            border: 1px solid #4100d5;
            color: #fff;
            background: #2f7ef2;
        }

        .page_item.active {
            width: 50px;
            height: 50px;
            border: 1px solid grey;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
        }

        .page_info {
            text-align: center;
            line-height: 50px;
            font-weight: lighter;
        }
    </style>
</div>
<script>
    $(".form-select").on("change", function () {
        $(".page_select").submit();
    })
</script>
</body>
</html>
